import 'package:enterprise_v6_app/app/components/custom_app_bar.dart';
import 'package:enterprise_v6_app/app/components/custom_refresh.dart';
import 'package:enterprise_v6_app/app/core/core.dart';
import 'package:enterprise_v6_app/app/core/ext/ext.dart';
import 'package:enterprise_v6_app/app/core/utils/interface.dart';
import 'package:enterprise_v6_app/app/data/entities/application/education/couser_center/textbook_list_entity.dart';
import 'package:enterprise_v6_app/app/modules/task/task_all/education/me_train_program/online_ing_course/online_ing_course_controller.dart';

///在线课程（ing）
class OnlineIngCoursePage extends StatelessWidget {
  OnlineIngCoursePage({super.key});

  final controller = Get.put(OnlineIngCourseController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: controller,
        builder: (_) {
          return Scaffold(
            key: controller.riskRightScaffoldKey,
            backgroundColor: AppColors.bg_color_grey,
            appBar: CustomAppBar(
              titleText: '在线培训',
            ),
            body: Container(
              color: AppColors.bg_color_grey,
              padding: EdgeInsets.only(top: 12.w, right: 16.w, left: 16.w),
              child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: _getSearchEnterWidget(),
                      ),
                    ],
                  ),
                  AppGaps.vGap12,
                  Expanded(
                      child: CustomEasyRefreshList<TextbookListEntity>(
                    key: controller.globalKey,
                    dataLoad: (int index, int size, {String? search}) {
                      return controller.textbookList(
                        index,
                        size,
                      );
                    },
                    itemBuilder: (item, index) {
                      return _itemWidget(item);
                    },
                  )),
                ],
              ),
            ),
          );
        });
  }

  ///搜索框
  Widget _getSearchEnterWidget() {
    return Container(
        height: 38.w,
        padding: EdgeInsets.symmetric(horizontal: 12.w),
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.white, border: Border.all(color: const Color(0xffF0F0F0), width: 1.w), borderRadius: BorderRadius.all(Radius.circular(8.w))),
        child: Row(
          children: [
            SvgPicture.asset(
              AppImages.icon_search,
              width: 16.w,
            ),
            Expanded(
                child: TextField(
                    keyboardType: TextInputType.text,
                    textInputAction: TextInputAction.done,
                    controller: TextEditingController(text: controller.searchX.value),
                    onChanged: (value) {
                      controller.searchX.value = value;
                      controller.globalKey.currentState?.onRefresh();
                    },
                    style: TextStyle(color: const Color(0xff222222), fontWeight: FontWeight.w400, fontSize: 14.sp),
                    decoration: InputDecoration(
                      counterText: '',
                      //防止适配不居中
                      isCollapsed: true,
                      border: const OutlineInputBorder(borderSide: BorderSide.none),
                      contentPadding: EdgeInsets.only(left: 8.w),
                      hintText: '请输入课程名称搜索',
                      hintStyle: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400, color: const Color(0xffA0A7B5)),
                    )))
          ],
        ));
  }

  Widget _rowData(String name, String value, {Alignment alignment = Alignment.centerLeft}) {
    return Row(
      children: [
        Text(
          name,
          style: TextStyle(
            color: const Color(0xFFA5A6B5),
            fontWeight: FontWeight.w400,
            fontSize: 13.sp,
          ),
        ),
        Expanded(
            child: Align(
          alignment: alignment,
          child: Text(
            value,
            style: TextStyle(
              color: const Color(0xFF495061),
              fontSize: 12.sp,
              fontWeight: FontWeight.w400,
            ),
          ),
        )),
      ],
    );
  }

  ///分割线
  Widget _divider() {
    return Container(
      width: 2.w,
      height: 10.w,
      decoration: const BoxDecoration(
          gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [
        Color(0xFFD8D8D8),
        Color(0xFFD8D8D8),
      ])),
    );
  }

  Widget _itemWidget(TextbookListEntity item) {
    return Container(
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.w),
      ),
      child: Row(
        children: [
          item.textbookCover == null
              ? Container(
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                  width: 80.w,
                  height: 80.w,
                )
              : Container(
                  margin: EdgeInsets.only(top: 8.w, right: 8.w),
                  width: 80.w,
                  height: 80.w,
                  decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(
                        Radius.circular(8),
                      ),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color(0xFFEFF2F6),
                        width: 1,
                      ),
                      image: DecorationImage(
                        image: NetworkImage('${Interface.fileUrl}${item.textbookCover}'),
                      )),
                ),
          AppGaps.hGap8,
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                item.textbookName ?? '',
                style: TextStyle(
                  color: const Color(0xFF262F38),
                  fontWeight: FontWeight.w500,
                  fontSize: 14.sp,
                ),
              ),
              AppGaps.vGap6,
              _rowData('讲师：', item.textbookLecturerName ?? ''),
              AppGaps.vGap6,
              Row(
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        SvgPicture.asset(
                          AppImages.icon_course_clock,
                        ),
                        AppGaps.hGap4,
                        Text(
                          '学时数:',
                          style: TextStyle(
                            color: const Color(0xFFA5A6B5),
                            fontWeight: FontWeight.w400,
                            fontSize: 12.sp,
                          ),
                        ),
                        Expanded(
                          child: Text(
                            '${item.textbookApproAch ?? ''}',
                            style: TextStyle(
                              color: const Color(0xFF495061),
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: [
                        _divider(),
                        AppGaps.hGap10,
                        SvgPicture.asset(
                          AppImages.icon_course_eye,
                        ),
                        AppGaps.hGap4,
                        Text(
                          '已学:',
                          style: TextStyle(
                            color: const Color(0xFFA5A6B5),
                            fontWeight: FontWeight.w400,
                            fontSize: 12.sp,
                          ),
                        ),
                        Expanded(
                          child: Text(
                            '${item.viewNumber ?? '0'}',
                            style: TextStyle(
                              color: const Color(0xFF495061),
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              )
            ],
          ))
        ],
      ),
    ).clickOnce(() {
      controller.courseDetail(item);
    });
  }
}
